<template>
  <div style="">
    <!-- <span style="color: #409EFF;margin-left: 10px">检查印象</span> -->
    <el-radio-group v-model="greenType" style="margin-left:15px " @change="changelaxy()">
      <el-radio-button v-if="!(this.$store.getters.hospitalId == 76 || this.$store.getters.hospitalId == 201)" label="胸痛" />
      <el-radio-button label="卒中" />
    </el-radio-group>
    <el-row style="margin-top: 10px">
      <el-col :span="19" style="font-size: 14px;margin-left: 10px">
        辅助检查:
        <el-select v-model="name" style="width: 10%;" filterable clearable>
          <el-option v-for="item in examineList" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button style="text-align: right" type="primary" @click="newimpression()">新增印象</el-button>
        <el-button style="text-align: right" type="primary" @click="selectList()">查询</el-button>
      </el-col>
    </el-row>
    <el-divider />
    <el-row>
      <el-col style="padding: 20px;">
        <el-table ref="multipleTable" :data="tableData" height="660" style="width: 100%; margin-top: -30px" class="table" border>
          <!-- <el-table-column
             type="selection"
             width="50"
             header-align="center"
             align="center">
           </el-table-column>-->
          <el-table-column label="辅助检查" min-width="200" prop="name" header-align="center" align="center" />
          <el-table-column prop="greenType" label="疾病类型" min-width="200" header-align="center" align="center" />
          <el-table-column label="状态" min-width="150" header-align="center" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status=='1'">使用中</span>
              <span v-else-if="scope.row.status=='0'">禁用</span>
              <span v-else>禁用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="150" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="details(scope.row)">详情</el-button>
              <el-button v-if="scope.row.defaultFlag != '0'" type="text" style="margin-left: 30px" @click="statusChangeFunc(scope.row)">
                <span v-if="scope.row.status=='1'">禁用</span>
                <span v-else-if="scope.row.status=='0'">启用</span>
                <span v-else>启用</span>
              </el-button>
              <el-button v-if="scope.row.defaultFlag != '0'" type="text" style="color: red;margin-left: 30px" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="float: right"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>

    <!-- 新-弹窗 -->
    <el-dialog
      v-el-drag-dialog
      :title="(addUpdateList.id ? '修改' : '新增') + '印象'"
      :visible.sync="addUpdatedialog"
      width="85%"
      center
      style="margin-top: -70px;margin-left: 140px"
      :before-close="handleClose"
    >
      <el-form ref="send" :model="send" :rules="addbaserules" class="elform mt-10" :inline="true" style="width: 100%;height: 40px">
        <el-col :span="16">
          <el-form-item label="疾病类型:" prop="greenType"><el-input v-model="send.greenType" disabled /></el-form-item>
          <el-form-item label="辅助检查:" prop="name">
            <el-select v-model="send.name" filterable placeholder="请选择" @change="isName()">
              <el-option v-for="item in examineList" :key="item.value" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="!addUpdateList.id" :span="8">
          <el-form-item label="" prop="impressionform">
            <el-select v-model="send.impressionform" placeholder="请选择印象形式" filterable :disabled="addUpdateList.impressionclassbList.length>0">
              <el-option v-for="item in impressction" :key="item.value" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
          <el-form-item label=""><el-button type="primary" size="small" @click="addImpression('send')">添加印象</el-button></el-form-item>
        </el-col>
      </el-form>
      <el-card shadow="never" class="elform mt-10" style=" clear: both; ">
        <el-form ref="addUpdateList" :model="addUpdateList" :inline="true" style="width: 100%;height: 500px;overflow: auto; ">
          <el-row v-for="(item, index) in addUpdateList.impressionclassbList" :key="index" style=" margin-bottom: 20px">
            <el-col :span="3" :offset="3" style="">
              <el-form-item style="margin: 0;">
                <span v-if="item.type && item.type == '1'"><el-radio /><b>单选</b></span>
                <span v-if="item.type && item.type == '2'"><el-checkbox :checked="true" /><b>多选</b></span>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="">
              <!-- :prop="'impressionclassbList.' + index + '.name'" -->
              <el-form-item
                :prop="'impressionclassbList.' + index + '.name'"
                :rules="{
                  required: true,
                  message: '请填写标题',
                  trigger: 'blur'
                }"
              >
                <el-input v-model="item.name" style="width: 100%" />
                <!-- <span style="color: black;margin-left: 3px;font-size: 18px">:</span> -->
              </el-form-item>
            </el-col>
            <!-- <el-col :span="17">
                <span v-for="(el, key) in item.impressionclasscList" :key="index + '-' + key" class="">

                  <el-col :span="1">
                    <el-form-item style="margin: 0;">
                      <span v-if="el.type && el.type == '1'"><el-radio /></span>
                      <span v-if="el.type && el.type == '2'"><el-checkbox :checked="true" /></span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item
                      :rules="{
                        required: true,
                        message: '请填写选项',
                        trigger: 'blur'
                      }"
                    >
                      <el-input v-model="el.name" />
                    </el-form-item>
                  </el-col>
                </span>
              </el-col> -->
            <!-- <el-col :span="2" style="text-align: right">
                <el-button v-if="item.impressionclasscList.length>0 && item.impressionclasscList[0].type == '1'" type="text" style="font-size: 16px;" size="mini" @click="addClassCList(item, '1')">
                  <span>添加单选</span>
                </el-button>
                <el-button v-if="item.impressionclasscList.length>0 && item.impressionclasscList[0].type == '2'" type="text" style="font-size: 16px;" size="mini" @click="addClassCList(item, '2')">
                  <span>添加多选</span>
                </el-button>
              </el-col> -->
            <el-col v-if="addUpdateList.defaultFlag!='0'" :span="2" style="text-align: right;">
              <el-button type="text" style="color: red;font-size: 16px;" size="mini" @click="removeClassBList(item, index)">删除</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="
            resetAll();
            addUpdatedialog = false;
          "
        >
          取 消
        </el-button>
        <el-button v-if="addUpdateList.defaultFlag!='0'" type="primary" @click="saveDialogData('addUpdateList')">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 新-弹窗 - End -->
  </div>
</template>

<script>
import { findImpressionClass, saveImpressionClass, deleteImpressionClassA } from '@/api/back-management/greenway-set/Check_impression'
import elDragDialog from '@/directive/el-drag-dialog'
export default {
  name: 'CheckImpression',
  directives: { elDragDialog },
  data() {
    return {
      /* 胸痛卒中单选按钮*/
      greenType: (this.$store.getters.hospitalId == '76' || this.$store.getters.hospitalId == '201') ? '卒中' : '胸痛',
      /* 辅助检查*/
      name: '',
      /* 胸痛辅助检查*/
      examination: [
        {
          value: '心电图',
          label: '心电图'
        },
        {
          value: '超声',
          label: '超声'
        }
      ],
      /* 卒中辅助检查*/
      examinations: [
        {
          value: '心电图',
          label: '心电图'
        }
      ],
      /* 表格*/
      tableData: [],
      /* 表格分页参数*/
      pageNum: 1,
      pagesize: 10,
      pageTotal: 0,
      /* 新增表单*/
      addbaserules: {
        impressionform: [{ required: true, message: '请选择印象形式', trigger: '[blur,change]' }],
        name: [{ required: true, message: '请输入标题', trigger: 'blur' }]
      },

      examineList: [
        {
          value: '心电图',
          label: '心电图'
        },
        {
          value: '超声',
          label: '超声'
        },
				{
				  value: 'CT',
				  label: 'CT'
				}
      ],
      /* 外部胸痛辅助检查*/
      examtion: [
        {
          value: '心电图',
          label: '心电图'
        },
        {
          value: '超声',
          label: '超声'
        }
      ],
      /* 外部卒中辅助检查*/
      examtions: [
        {
          value: '心电图',
          label: '心电图'
        }
      ],
      send: {
        name: '心电图',
        greenType: '',
        impressionform: ''
      },
      /* 疾病类型*/
      diseatypection: [
        {
          value: '胸痛',
          label: '胸痛'
        },
        {
          value: '卒中',
          label: '卒中'
        }
      ],
      /* 选择印象形式*/
      impressction: [
        {
          value: '1',
          label: '单选'
        },
        {
          value: '2',
          label: '多选'
        }
      ],
      /* 新增印象形式*/
      tableDete: [],
      nerrey: [],
      /* 编辑印象*/
      upimpressiongase: false,
      /* 编辑表单*/
      upsend: {
        name: '',
        greenType: '',
        id: ''
      },
      upbaserules: {},
      uptable: [],
      upnerrey: [],
      /* 删除*/
      delist: [],
      // <!-- 新-弹窗 -->
      addUpdatedialog: false,
      userId: this.$store.getters.userId,
      hospitalId: this.$store.getters.hospitalId,
      templateData: {
        // 模板数据
        id: '',
        impressionclassbList: [],
        defaultFlag: '1',
        status: '0',
        userId: this.$store.getters.userId,
        greenType: '',
        hospitalId: this.$store.getters.hospitalId,
        name: ''
      },
      addUpdateList: {
        // 弹窗内下方表单数据
        id: '',
        impressionclassbList: [],
        defaultFlag: '1',
        status: '0',
        userId: this.$store.getters.userId,
        greenType: '',
        hospitalId: this.$store.getters.hospitalId,
        name: ''
      }
      // <!-- 新-弹窗 - End -->
    }
  },
  mounted() {
    this.selectList()
  },
  methods: {
    // 弹窗内添加印象
    addImpression(formname) {
      this.$refs[formname].validate(valid => {
        if (valid) {
          this.addUpdateList.impressionclassbList.push({
            name: '',
            type: this.send.impressionform
            // impressionclasscList: [
            //   {
            //     name: '',
            //     type: this.send.impressionform
            //   },
            //   {
            //     name: '',
            //     type: this.send.impressionform
            //   }
            // ]
          })
        }
      })
    },
    /* 新增添加单选多选*/
    addClassCList(item, type) {
      if (item.impressionclasscList.length > 5) {
        this.$message.info('最多添加六条')
        return
      }
      const obj = {
        name: '',
        type: type
      }
      item.impressionclasscList.push(obj)
    },
    /* 删除单选多选*/
    removeClassBList(item, index) {
      console.log(item)
      this.addUpdateList.impressionclassbList.splice(index, 1)
    },

    saveDialogData(formname) {
      this.$refs[formname].validate(valid => {
        if (valid) {
          if (this.addUpdateList.impressionclassbList.length === 0) {
            this.$message.warning('最少添加一条')
            return
          }
					this.addUpdateList.name = this.send.name
          saveImpressionClass(this.addUpdateList).then(res => {
            if (res.code === 0) {
              this.resetAll()
              this.addUpdatedialog = false
              this.selectList()
              this.$message.success('保存成功')
            } else {
              this.$message.error('保存失败')
            }
          })
        }
      })
    },
    statusChangeFunc(row) {
      this.addUpdateList = JSON.parse(JSON.stringify(row))
      let negation = '0'
      let tips = `请确认您的此次操作，会将 默认的${row.name}  变更为启用状态！`

      if (this.addUpdateList.status === '0') {
        negation = '1'
        tips = `请确认您的此次操作，会将 正在使用的${row.name} 配置 变更为禁用状态！`
      }

      this.$confirm(tips)
        .then(_ => {
          this.addUpdateList.status = negation
          // this.addUpdateList.defaultFlag = '0'
          saveImpressionClass(this.addUpdateList).then(res => {
            if (res.code === 0) {
              this.addUpdateList = { ...this.templateData }
              this.selectList()
              this.$message.success('修改成功')
            } else {
              this.$message.error('修改失败')
            }
          })
        })
        .catch(_ => {})
    },

    resetAll() {
      this.resetForm('send')
      this.addUpdateList = { ...this.templateData }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    /* 详情*/
    details(row) {
      // this.upsend.id = row.id
      // this.upsend.name = row.name
      this.send.greenType = row.greenType
      this.addUpdateList = JSON.parse(JSON.stringify(row))
      this.addUpdatedialog = true
      // this.upimpressiongase = true
    },
    handleClose(done) {
      this.resetAll()
      done && done()
    },

    /* 删除*/
    handleDelete(row) {
      this.$confirm('确认删除？')
        .then(_ => {
          const data = {
            id: row.id
          }
          deleteImpressionClassA(data).then(res => {
            if (res.code === 9999) {
              this.$message({
                type: 'error',
                message: '删除失败!'
              })
            } else {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.selectList()
            }
          })
        })
        .catch(_ => {})
    },
    /* 胸痛/卒中单选按钮改变方法*/
    changelaxy() {
      if (this.greenType === '胸痛') {
        this.examineList = [
          {
            value: '心电图',
            label: '心电图'
          },
          {
            value: '超声',
            label: '超声'
          },
          {
            value: 'CT',
            label: 'CT'
          },
        ]
      } else if (this.greenType === '卒中') {
        this.examineList = [
          {
            value: '心电图',
            label: '心电图'
          }
        ]
      }
      this.pageNum = 1
      this.pageTotal = 0
      this.selectList()
    },
    /* 新增印象*/
    newimpression() {
      this.send.greenType = this.greenType
      this.addUpdateList.greenType = this.greenType
      // this.addUpdateList.name = this.send.name
      this.addUpdatedialog = true
    },
    isName() {
      // this.addUpdateList.name = this.send.name
    },

    /* 查询表格*/
    selectList() {
      const data = {
        pageNum: this.pageNum,
        pageSize: this.pagesize,
        greenType: this.greenType,
        hospitalId: this.$store.getters.hospitalId,
        // name: this.name,
        name: this.name
      }
      findImpressionClass(data).then(res => {
        this.tableData = res.data
        this.pageTotal = Number(res.total)
      })
      // selectList(data).then(res => {
      //   this.tableData = res.data
      //   this.pageTotal = Number(res.total)
      // })
    },
    // 分页尺寸改变
    handleSizeChange(size) {
      this.pagesize = size
      this.selectList()
    },
    // 分页换页
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.selectList()
    }
  }
}
</script>

<style scoped>
.table /deep/ th:first-child .cell,
.el-table--border td:first-child .cell {
  padding-left: 7px;
}

.el-col {
  border: 1px solid transparent;
}

.elform /deep/ .el-form-item {
  margin-bottom: 0px;
}

.elgroup /deep/ .el-radio {
  margin-right: -64px;
}

.checkgroup /deep/ .el-checkbox {
  margin-right: -64px;
}
</style>
